<template>
  <div class="searchbox">
    <div class="search">
      <input type="text" class="searchInput" v-model="searchValue" />
      <i @click="search" class="el-icon-search"></i>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
      <span>推荐：</span>
      <nuxt-link :key="index" v-for="(item,index) in recommendList" :to="`/post?city=${item}`">{{item}}</nuxt-link>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      recommendList:['广州','上海','北京'],
      searchValue:'',
      //文章列表的数据
      data:[],
      total:0
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    search(){
      this.$router.push(`post?city=${this.searchValue}`)
    },
    async getDataList(){
     const {data:res} = await this.$axios.get('postkinds')
    }
  },
  watch:{
    $route(){
      if(this.$route.query.city){
        this.searchValue = this.$route.query.city
      }
    }
  }
}
</script>
<style lang="less" scoped>
.searchbox {
  width: 100%;
  .search {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    .searchInput{
      width: 100%;
      height:40px;
      // line-height: 40px;
      border:2px solid #ffa500;
      outline: none;
      padding: 0 48px 0 20px;
    }
    i{
      position: absolute;
      right:15px;
      top:50%;
      font-size: 20px;
      color:#ffa500;
      cursor: pointer;
      transform: translate(0,-50%);
    }
  }
  .recommend{
    font-size: 12px;
     color:#666;
    a{
      color:#666;
      text-decoration: none;
      margin: 0 3px;
      &:hover{
        color:#ffa500;
        text-decoration: underline;
      }
    }
  }
}
</style>